<template>
    <div style="padding: 10px 15px">
        <el-upload class="upload-demo" :disabled="disabled" :action="imgLoadPath"
            :on-remove="handleRemove" :show-file-list="false" list-type="picture" :before-upload="beforeUpload"
            :on-success="handleBeforeUpload1" :multiple="true">
            <el-button size="small" type="primary" :loading="loading">点击上传</el-button>
        </el-upload>
        <div class="img-list-group" v-for="(item, index) in fileList" :key="index">
            <video :src="docLoadPath + item" style="width: 100px;height: 60px;" controls v-if="getFileFormat(item) == 'mp4'"></video>
            <el-image style="width: 60px; height: 60px" :src="docLoadPath + item" :preview-src-list="[docLoadPath + item]" v-else>
            </el-image>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleRemove(index)"></el-button>
        </div>
    </div>
</template>

<script>
import api from '@/api/index';
export default {
    name: 'IDReady11',
    props: {
        fileList: {
            type: Array,
            default: []
        },
        disabled: {
            type: Boolean,
            default: false
        },
        sise: {
            type: Number,
            default: 1
        },
        siseFormat: {
            type: String,
            default: 'm'
        }
    },
    data() {
        return {
            fileLists: [],
            docLoadPath: api.IMG_PATH,
            imgLoadPath: api.API_PATH + api.LOGIN_IMG,
            uploadLogin: null,
            loading: false,
            showViewer: false,
            showFile: '',
            maxSize: 300
        };
    },
    methods: {
        getFileFormat(file) {
            return file?file.substring(file.lastIndexOf('.') + 1):'';
        },
        //身份证正面上传成功
        handleBeforeUpload1(response, file, fileList) {
            this.loading = false;
            if (response.code == 1) {
                this.$emit('update:fileList', [...this.fileList,...[response.data]]);
                this.$message.success('上传成功');
            } else {
                this.$message.error(response.msg);
            }
        },
        beforeUpload: function (file) {
            var FileExt = file.name.replace(/.+\./, '');
            if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'mp4'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传jpg,jpeg,png,gif,bmp,mp4格式文件！'
                });
                return false;
            }
            const fileSize = this.fileSize(file.size);
            if (fileSize.code == 0) {
                this.$message({
                    type: 'warning',
                    message: fileSize.msg
                });
                return false;
            }
            this.loading = true;
        },
        fileSize(fileSize) {
            let total = 0;
            if ('m' == this.siseFormat) {
                total = fileSize / 1024 / 1024;
            } else if ('kb' == this.siseFormat) {
                total = fileSize / 1024;
            }
            if (total > this.size) {
                return { code: 0, msg: '文件大小请控制在' + this.size + this.siseFormat + '以内!' };
            }
            return { code: 1 };
        },
        handleError() {
            this.loading = false;
            this.$message.error('上传失败');
        },
        handleRemove(index) {
            this.fileList.splice(index, 1);
        }
    }
};
</script>

<style scoped>
.zhenjian-id-box {
    width: 150px;
    height: 150px;
    font-size: 14px;
    color: #888;
    text-align: center;
    line-height: 150px;
    border-radius: 4px;
    position: relative;
}

.zhenjian-id-box-show {
    position: absolute;
    top: 0;
    right: 0;
    color: #409EFF;
    font-size: 30px;
    font-weight: bold;
    z-index: 100;
}

.img-list-group {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #eee;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
    width: 240px;
    margin-top:10px;
}
</style>
